import React, { Component } from 'react'
import "../tabber/tabber.scss"

export default class tabber extends Component {
    state={
        activeTab:"home",
        activeTabPath:{
            home:"/home",
            sort:"/sort",
            address:"/address",
            my:"/login"
        }
    }
    componentDidMount(){
        let activeTab = this.props.match.url.split("/")[1];
        this.setState({
            activeTab
        })
    }
    hanleClick=(activeTab) => {
        this.setState({
            activeTab
        })
        this.props.history.push(this.state.activeTabPath[activeTab])
    }
    
    render() {
        return (
            <div>
                <div className="content">
                    {this.props.children}
                </div>
                <div className="tabber">
                    <div className="item">
                        <i className={this.state.activeTab==="home"?"iconfont icon-changyonglogo40 active":"iconfont icon-changyonglogo40"} 
                        onClick={this.hanleClick.bind(this,"home")}></i>
                        <span className={this.state.activeTab==="home"?"active":""}>首页</span>
                    </div>
                    <div className="item">
                        <i className={this.state.activeTab==="sort"?"iconfont icon-menu active" :"iconfont icon-menu" }
                        onClick={this.hanleClick.bind(this,"sort")}></i>
                        <span className={this.state.activeTab==="sort"?"active":""}>分类</span>
                    </div>
                    <div className="item">
                        <i className={this.state.activeTab==="address"?"iconfont icon-dizhi active":"iconfont icon-dizhi"}
                        onClick={this.hanleClick.bind(this,"address")}></i>
                        <span className={this.state.activeTab==="address"?"active":""}>地图</span>
                    </div>
                    <div className="item">
                        <i className={this.state.activeTab==="my"?"iconfont icon-ziyuan active":"iconfont icon-ziyuan"}
                        onClick={this.hanleClick.bind(this,"my")}></i>
                        <span className={this.state.activeTab==="my"?"active":""}>我的</span>
                    </div>
                </div>
            </div>
        )
    }
}
